<template>
	<div>
		<h1 class='login'>登录</h1>
		<div class='name'>
			<input type="text" placeholder="请输入手机号" v-model='phone' @click='closeNum'>
		</div>
		<div class='code name'>
			<ul class="mm_box my-class" style='width:75%;float:left;'>
                <li></li><li></li><li></li><li></li>
            </ul>
			<p @click='sendCode' :class="{'send-btn':true,'off-send-code-active':offActiveCode}">{{codeFont}}</p>
		</div>
		<div :class="{'go-login':true,'off-login-active':offActiveLogin}" @click='goLogin'>登录</div>
		<div class="numb_box" style='display:none'>
            <div class="xiaq_tb">
                <img src="../static/img/jftc_14.jpg" height="10"></div>
            <ul class="nub_ggg">
                <li><a href="javascript:void(0);" class="zf_num">1</a></li>
                <li><a href="javascript:void(0);" class="zj_x zf_num">2</a></li>
                <li><a href="javascript:void(0);" class="zf_num">3</a></li>
                <li><a href="javascript:void(0);" class="zf_num">4</a></li>
                <li><a href="javascript:void(0);" class="zj_x zf_num">5</a></li>
                <li><a href="javascript:void(0);" class="zf_num">6</a></li>
                <li><a href="javascript:void(0);" class="zf_num">7</a></li>
                <li><a href="javascript:void(0);" class="zj_x zf_num">8</a></li>
                <li><a href="javascript:void(0);" class="zf_num">9</a></li>
                <li><a href="javascript:void(0);" class="zf_empty">清空</a></li>
                <li><a href="javascript:void(0);" class="zj_x zf_num">0</a></li>
                <li><a href="javascript:void(0);" class="zf_del">删除</a></li>
            </ul>
        </div>
	</div>
</template>

<script>
import { SEND_CODE, LOGIN, AJAX, _layer, _checkMobile, HREF } from "@/comm.js";

export default {
  beforeCreate() {
    $("body").css("background", "white");
  },
  data() {
    return {
      phone: "", //输入的手机号
      code: "", //输入的验证码
      offSendCode: false, //代表还没发送验证码
      codeFont: "验证码", //控制秒数和显示验证码
      offNumShow: true, //控制键盘弹起和隐藏
      offActiveLogin: false, //控制登陆按钮高亮
      offActiveCode: false //控制验证码高亮
    };
  },
  methods: {
    sendCode() {
      if (!_checkMobile(this.phone)) {
        this.phone = "";
        return;
      }
      if (this.offSendCode) return;
      this.offSendCode = true;
      AJAX(SEND_CODE, "post", { phone: this.phone.trim() }, data => {
        this.offActiveCode = true;
        if (data.retult) {
		  this.codeFont = parseInt(data.data);
		   this.offActiveCode = true;
          var time = setInterval(() => {
            if (!--this.codeFont) {
              this.offActiveCode = false;
				this.offSendCode = false;
              this.codeFont = "验证码";
              clearInterval(time);
            }
          }, 1000);
        } else {
          this.offActiveCode = false;

          this.offSendCode = false;
          _layer(data.message);
        }
      });
    },
    //关闭自己的键盘
    closeNum() {
       this.offNumShow=false;
      $(".mm_box").trigger("click");
    },
    //去登录
    goLogin(){
      console.log(1)
    }
  },
  mounted() {
    //数字显示隐藏
    let This = this;
    $(".xiaq_tb").click(function() {
      $(".numb_box").slideUp(300);
      This.offNumShow = true;
    });
    $(".mm_box").click(function() {
      if (This.offNumShow) {
        $(".numb_box").slideDown(300);
      } else {
        $(".numb_box").slideUp(300);
      }
      This.offNumShow = !This.offNumShow;
    });
    var i = 0;
    $(".nub_ggg li .zf_num").click(function() {
      //如果有6位数那么<ul class="mm_box my-class" style='width:75%;float:left;'>
            //     <li></li><li></li><li></li><li></li>
            // </ul>这个结构里面的li就增加2个            下面的if(i<4)  改为<6
      if (i < 4) {
        // $(".mm_box li").eq(i).addClass("mmdd");
        $(".mm_box li")
          .eq(i)
          .html($(this).text());
        $(".mm_box li")
          .eq(i)
          .attr("data", $(this).text());
        i++;
        if (i == 4) {    //如果是6位数就改为6
          setTimeout(function() {
            var data = "";
            $(".mm_box li").each(function() {
              data += $(this).attr("data");
            });
            alert('输入的数'+data);
            This.code = data;
            This.offActiveLogin = true;
          }, 100);
        }
      }
    });
    //删除按钮
    $(".nub_ggg li .zf_del").click(function() {
      This.offActiveLogin = false;

      if (i > 0) {
        i--;
        $(".mm_box li")
          .eq(i)
          .attr("data", "");
        $(".mm_box li")
          .eq(i)
          .html("");
      }
    });

    $(".nub_ggg li .zf_empty").click(function() {
      This.offActiveLogin = false;

      $(".mm_box li").attr("data", "");
      $(".mm_box li").html("");
      i = 0;
    });
  }
};
</script>
<style scoped>
.login {
  height: 170px;
  font-size: 25px;
  line-height: 200px;
  text-align: center;
}
.name {
  width: 80%;
  height: 50px;
  margin: auto;
}
.name input {
  width: 100%;
  padding: 13px 0;
  border-bottom: 1px solid #eee;
  outline: none;
  font-size: 16px;
}
.code {
  margin-top: 10px;
}
.my-class {
  border: none;
}
.my-class li {
  height: 96%;
  margin-right: 14px;
  border-right: none;
  text-align: center;
  font-weight:600;
  line-height: 250%;
  border-bottom: 1px solid #eee;
}
.name .send-btn {
  width: 24%;
  height: 30px;
  float: left;
  margin-top: 15px;
  text-align: center;
  line-height: 30px;
  color: #eee;
  background: #bb2e2c;

  border-radius: 50px;
}
.go-login {
  margin: 75px auto;
  width: 50%;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  color: #eee;
  background: #999;
  text-align: center;
  border-radius: 50px;
}
.off-login-active {
  background: #bb2e2c;
}
.off-send-code-active {
  background: #999;
}
</style>